<template>
  <div class="seller-wrapper" ref="scrollWrapper">
    <div>
      <div class="seller-header border-bottom">
        <div class="seller-name">{{seller.name}}</div>
        <div class="star-wrapper">
          <star :score="seller.score"></star>
          <span class="count">({{seller.ratingCount}})</span>
          <span class="rating-count">月售{{seller.sellCount}}单</span>
        </div>
        <div class="seller-delivery border-top">
          <div class="item border-right">
            <p class="desc">起送价</p>
            <p class="cont">
              <span class="num">{{seller.minPrice}}</span>
              <span class="unit">元</span>
            </p>
          </div>
          <div class="item border-right">
            <p class="desc">商家配送</p>
            <p class="cont">
              <span class="num">{{seller.deliveryPrice}}</span>
              <span class="unit">元</span>
            </p>
          </div>
          <div class="item">
            <p class="desc">平均配送时间</p>
            <p class="cont">
              <span class="num">{{seller.deliveryTime}}</span>
              <span class="unit">分钟</span>
            </p>
          </div>
        </div>
      </div>
      <div class="devide"></div>
      <div class="public">
        <h3 class="title">公告与活动</h3>
        <p class="description">{{seller.bulletin}}</p>
        <ul>
          <li class="support-item border-top"
          v-for="(item, index) of seller.supports" :key="index">
            <span class="support-icon"
              :class="classMap[item.type]"
            ></span>
            <span class="support-desc">{{item.description}}</span>
          </li>
        </ul>
      </div>
      <div class="devide"></div>
      <div class="scene">
        <h3 class="scene-title">
          商家实景
        </h3>
        <div class="pics" ref="picScroll" @click="handleShowSwiper">
          <div class="pic-wrapper">
            <img class="pic"
              :src="img" v-for="(img, index) of seller.pics"
              :key="index">
          </div>
        </div>
      </div>
      <div class="devide"></div>
      <div class="info">
        <h3 class="title">商家信息</h3>
        <ul>
          <li class="info-item border-top"
            v-for="(item, index) of seller.infos" :key="index"
          >
            {{item}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import { mapState } from 'vuex'
import Star from '@/pages/common/Star'
Vue.use(VueAwesomeSwiper)
export default {
  name: 'StoreSeller',
  data () {
    return {
      classMap: ['decrease', 'discount', 'special', 'invoice', 'bao'],
      swiperOption: {},
      showSwiper: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.scrollWrapper)
      // 先根据展示的图片数设置 picWrapper 的宽度，在进行 scroll
      setTimeout(() => {
        this.initPicScroll()
      }, 200)
    })
  },
  computed: {
    ...mapState(['seller'])
  },
  methods: {
    initPicScroll () {
      let picWrapper = this.$refs.picScroll.getElementsByClassName('pic-wrapper')[0]
      picWrapper.style.width = 2.56 * this.seller.pics.length + 'rem'
      this.picScroll = new BScroll(this.$refs.picScroll, {
        click: true,
        scrollX: true,
        scrollY: false
      })
    },
    handleShowSwiper () {
      this.showSwiper = !this.showSwiper
      console.log(1)
    }
  },
  components: {
    Star
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/common.styl'
  .seller-wrapper
    height 100%
    font-size .24rem
    font-weight 200
    color rgb(7, 17, 27)
    .seller-header
      padding .36rem
      .seller-name
        font-size .28rem
        font-weight normal
        margin-bottom .16rem
      .star-wrapper
        font-size 0
        font-weight 200
        margin-bottom .36rem
        .count, .rating-count
          font-size .2rem
          vertical-align top
        .count
          margin 0 .24rem 0 .16rem
        & >>> .iconfont
          font-size .28rem
          margin-right .1rem
      .seller-delivery
        padding-top .36rem
        overflow hidden
        .item
          float left
          width 33.333%
          color rgb(47, 153, 159)
          text-align center
          .desc
            font-size .2rem
            margin-bottom .08rem
          .cont
            font-size 0
            .num
              color #000000
              font-size .48rem
            .unit
              font-size .2rem
    .devide
      height .4rem
      background-color #eeeeee
    .public
      padding .36rem .36rem 0
      .title
        font-size .28rem
        font-weight normal
      .description
        padding .2rem .24rem .32rem
        color rgb(240, 20, 20)
        line-height .48rem
      .support-item
        padding .32rem
        .support-desc
          display inline-block
          vertical-align top
          margin-top .04rem
        .support-icon
          display inline-block
          width .32rem
          height .32rem
          margin-right .12rem
          background-size 100% 100%
          border-radius .04rem
          &.bao
            background-image url('../goods/bao.png')
          &.decrease
            background-image url('../goods/decrease.png')
          &.discount
            background-image url('../goods/discount.png')
          &.invoice
            background-image url('../goods/invoice.png')
          &.special
            background-image url('../goods/special.png')
    .scene
      padding .36rem 0 .36rem .36rem
      .scene-title
        margin-bottom .24rem
        font-size .28rem
      .pic-wrapper
        white-space nowrap
        .pic
          width 2.4rem
          height 1.8rem
          margin-right .12rem
    .info
      padding .36rem .36rem 0
      .title
        font-size .28rem
        margin-bottom .24rem
      .info-item
        padding .32rem .24rem
        line-height .32rem
</style>
